import {Utils} from "./common.js"

const Layout = Object.freeze({
    layout: Utils.CreateHTMLElement(`
<div class="mx-0 my-0 px-0 py-0 grid-layout">

    <div id="ID_sidebar" class="slog-shadow-right">
        <div id="ID_sidebar_menu" class="d-flex flex-column flex-shrink-0">
            <ul id="ID_sidebar_menu_list" class="nav nav-pills nav-flush flex-column text-center">
                <li> <a href="javascript:;" data-slog-menu="toggle" class="nav-link py-3 bi bi-arrow-left" title="Toggle"></a></li>
                <li> <a href="javascript:;" data-slog-menu="search" class="nav-link py-3 bi bi-search" title="Search"></a></li>
                <li> <a href="javascript:;" data-slog-menu="new" class="nav-link py-3 bi bi-file-earmark" title="New Article"></a></li>
                <li> <a href="javascript:;" data-slog-menu="setting" class="nav-link py-3 bi bi-gear" title="Setting"></a></li>
            </ul>
        </div>
        <div id='ID_sidebar_content' class="scroll scroll-vertical scroll-with-bg">
            <div id="ID_sidebar_content_tree"></div>
        </div>
    </div>

    <div class="grid-crumbs order-0 mx-4 pt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
          <ol class="breadcrumb"> </ol>
        </nav>
    </div>

    <main id="ID_main" class="order-1">
        <div id='ID_main_summary'>
            <h1></h1>
            <div class='d-flex'>
                <div class='px-2'>2019-03-22</div>
                <a class='px-2' href='javascript:;' data-slog-link='meta'>meta</a>
                <a class='px-2' href='javascript:;' data-slog-link='create'>create</a>
            </div>
            <div class='py-2'></div>
            <div class='py-3'></div>
        </div>

        <div id='ID_main_toc' class='py-2'></div>

        <div id="ID_main_content" class="slog-shadow-right">

            <div id="ID_main_content_group">
                <section id="slog_placeholder_widget">
                    <div class='d-flex'>
                        <div class="d-flex">
                            <a href="javascript:;" class="slog_menu_a bi bi-plus" data-slog-menu-item='0x0008'></a>
                        </div>
                        <div class="slog_section_right" style="color:#e1e1e1;"></div>
                    </div>
                </section>
            </div>


            <div id="ID_main_content_widget_tool">
                <ul class="nav justify-content-center">
                    <li class="nav-item"> <a class="nav-link bi bi-layer-forward" href="javascript:;" data-slog-section-menu='moveup'></a> </li>
                    <li class="nav-item"> <a class="nav-link bi bi-layer-backward" href="javascript:;" data-slog-section-menu='movedown'></a> </li>
                    <li class="nav-item"> <a class="nav-link bi bi-magnet-fill" href="javascript:;" data-slog-section-menu='focus'></a> </li>
                    <li class="nav-item"> <a class="nav-link bi bi-trash3-fill" href="javascript:;" data-slog-section-menu='delete'></a> </li>
                    <li class="nav-item"> <a class="nav-link bi bi-x-lg" href="javascript:;" data-slog-section-menu='close'></a> </li>
                </ul>
            </div>

            <div id="ID_main_content_up_arrow"> <div><i id="ID_slog_to_top" class="bi bi-arrow-up-circle-fill"></i></div></div>


        </div>
    </main>

    <footer class="grid-footer p-3 m-0 text-sm-start"> <center> 2010 - 2021 Jerry Chaos </center> </footer>

</div>`
    ),

    CreateProperty: () => {
        return Utils.CreateHTMLElement(`
<div id="slog_property" class="modal fade" data-bs-backdrop='true' tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class=modal-dialog>
        <div class=modal-content>
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Property</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">



<div class='row g-2'>
    <div class="col-md my-1">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="slog_property_radio_modify" checked>
      <label class="form-check-label" for="slog_property_radio_modify">
        MODIFY
      </label>
    </div>
    <div class="col-md my-1">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="slog_property_radio_create">
      <label class="form-check-label" for="slog_property_radio_create">
        CREATE
      </label>
    </div>
</div>




                <div class="form-floating my-1">
                    <input type="text" class="form-control" id="slog_property_name"></input>
                    <label for="slog_property_name">name</label>
                </div>
                <div class="form-floating my-1">
                    <input type="text" class="form-control" id="slog_property_tag"></input>
                    <label for="slog_property_tag">tag</label>
                </div>

                <div class='row g-2'>
                    <div class="col-md">
                        <div class="form-floating my-1">
                            <input type="date" class="form-control" id="slog_property_create"></input>
                            <label for="slog_property_create">create time</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="form-floating my-1">
                            <input type="date" class="form-control" id="slog_property_modify"></input>
                            <label for="slog_property_modify">modify time</label>
                        </div>
                    </div>
                </div>

                <div class='row g-2'>
                    <div class="col-md">
                        <div class="form-check my-1">
                            <input type="checkbox" class="form-check-input" id="slog_property_published"></input>
                            <label class='form-check-label' for="slog_property_published">published</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="form-check my-1">
                            <input type="checkbox" class="form-check-input" id="slog_property_TOC"></input>
                            <label class='form-check-label' for="slog_property_TOC">TOC</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="form-check my-1">
                            <input type="checkbox" class="form-check-input" id="slog_property_property"></input>
                            <label class='form-check-label' for="slog_property_property">property</label>
                        </div>
                    </div>
                </div>
                <div class="form-floating my-1">
                    <textarea class="form-control" id="slog_property_brief" style="height:300px"></textarea>
                    <label for="slog_property_brief">brief</label>
                </div>
            </div>



            <div class="modal-footer"></div>
        </div>
    </div>
</div>`);
    },

    CreateBlankPage: () => {
        return Utils.CreateHTMLElement(`<div class="d-flex justify-content-center align-items-center" style="height:100%;grid-area: main-content;font-weight: bold;font-size:5rem;color:darkgrey;user-select:none;">NO ARTICLE </div>`);
    },

    CreatePageListLeafItem: (id, offset, name) => {
        return `<a id="${id}" href="javascript:;" class="slog-list-group-item"> <div style="margin-left:${offset}em;">${name}</div> </a>`;
    },

    CreatePageListContainerItem: (id, offset, name, gapSize, backgroundColor) => {
        return `
<a id="${id}" href="javascript:;" class="slog-list-group-item d-flex align-items-center">
    <div class="slog-expand-arrow" style="margin-left:${offset}em" data-bs-toggle="collapse" data-bs-target="#collaper-${id}" aria-expanded="false" aria-current="true">
        <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>
    </div>
    <div style="margin-left:${gapSize}em;">${name}</div>
</a>
<div id="collaper-${id}" class="collapse" style="background-color:${backgroundColor}"></div>`;
    },

    CreateBreadcrumb: (arr) => {
        let _HTMLText = "";
        for(let i = arr.length - 1; i > 0; --i) {
            _HTMLText += `<li class="breadcrumb-item"><a data-slog-SUID='${arr[i].SUID}' href="javascript:;">${arr[i].name}</a></li>`;
        }
        _HTMLText += `<li class="breadcrumb-item active">${arr[0].name}</li>`;
        return Utils.CreateHTMLElement(_HTMLText);
    },
    
    CreateWidgetSelector:(arrWidgetType)=>{
        let _typeString = '';
        arrWidgetType.forEach(({type, name, desc}) => {
            _typeString += _CreateWidgetSelectorItem(type, name, desc);
        });
        
        return Utils.CreateHTMLElement(`<div class="modal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class='modal-dialog modal-lg modal-dialog-scrollable'> 
        <div class='modal-content'>
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Select your widget</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body scroll d-flex flex-row">

                <div class="container">
                  <div class="row row-cols-3">
                  ${_typeString}
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>`);
    },

    CreateTOCList: (el, marker, mapClass) => {
        let _out = '<ul>';
        const _arr = el.querySelectorAll(marker);
        for (let i = 0, N = _arr.length; i < N; ++i) {
            const _v = _arr[i];
            _v.id = _v.id || Utils.GUID();
            _out += `<li class='${mapClass.get(_v.nodeName)}'> <a href = "#${_v.id}" > ${_v.innerText} </a></li>`;
        }
        _out += '<ul>';
        return Utils.CreateHTMLElement(_out);
    },

    CreateSimpleTextEditorElement: () => {
        return Utils.CreateHTMLElement(`<div class='simple_text_editor'></div>`);
    },


    CreateSetting: () => {
        const _v= Utils.CreateHTMLElement(
            `<div class="modal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class='modal-dialog modal-lg'> 
        <div class='modal-content'>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <button id="aaab" type="button" class="btn btn-primary">Archive</button>
              </div>
              <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <button id="aaac" type="button" class="btn btn-primary">Log</button>
              </div>
              <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
            </div>
        </div>
    </div>
</div>`
        );
        _v.inputElem = _v.querySelector('#aaab');
        _v.logElem = _v.querySelector("#aaac");
        return _v;
    },

    CreateWidget: (SUID) => {
        const _v = Utils.CreateHTMLElement(`<section id='${SUID}'>
    <div class='d-flex justify-content-between'>
        <div class="slog_section_left d-flex align-items-center justify-content-center">
            <a href="javascript:;" class="slog_menu_a bi bi-plus" data-slog-menu-item='0x0008' style="visibility:hidden"></a>
            <a href="javascript:;" class="slog_menu_a bi bi-list" data-slog-menu-item='0x0001'></a>
        </div>
        <div class="slog_section_right"></div>
    </div>
</section>`);
        _v.slog_left = _v.querySelector('.slog_section_left');
        _v.slog_right = _v.querySelector('.slog_section_right');
        return _v;
    },

    CreateViewPaneElement: () => {return Utils.CreateHTMLElement(`<div class="slog_full_percent"></div>`);},
    CreateEditPaneElement: () => {return Utils.CreateHTMLElement(`<div class="slog_border slog_full_percent" slog-marker-widget></div>`);},

    CreateCodeEditPaneMenuElems: () => {
        const _uuid = Utils.GUID();
        return [Utils.CreateHTMLElement(`
    <div class='px-3'>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="${_uuid}" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="width:fit-content"> cpp </a>
          <ul class="dropdown-menu" aria-labelledby="${_uuid}">
            <li><a class="dropdown-item" data-slog-link="cpp">Cpp</a></li>
            <li><a class="dropdown-item" data-slog-link="javascript">JavaScript</a></li>
            <li><a class="dropdown-item" data-slog-link="go">Golang</a></li>
          </ul>
        </li>
      </ul>
    </div>`)];
    },

    CreateCodeViewPane: () => {
        return Utils.CreateHTMLElement(`<div class="slog_full_percent"> <pre class="hljs scroll scroll-horizontal"></pre> </div>`);
    },

    CreateTagHTMLString: (arrTag) => {
        let _out = "";
        if (arrTag) {
            for (let i = 0, N = arrTag.length; i < N; ++i) {
                _out += `<span class="badge rounded-pill bg-warning text-dark mx-2">${arrTag[i]}</span>`;
            }
        }
        return _out;
    }
})

function _CreateWidgetSelectorItem(type, name, desc, imgSrc) {
    return `
<div class="card col">
    <img src="/assets/code.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h3>${name}</h3>
        <p class="card-text">${desc}</p>
        <a href="javascript:;" data-slog-type="${type}">create</a>
    </div>
</div>`;
}

export default Layout;
